import type { FC } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { useMemoizedFn, useSafeState } from 'ahooks';
import { useRouter } from 'expo-router';
import { Space, Avatar } from '@/components';
import PreviewImages from '../PreviewImages';
import Participants from './participants';
import Times from './times';
import Likes from './likes';
import Header from './header';
import Location from './location';
import RichText from './richText';
import styles from './styles';
import { useDetails } from './hooks';

const users = [
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:bi3yz2gjrbyg3wllkntw3to6/bafkreidc4qbm2lisyrmbkgyhgv2aaimnyhp4noek6vsvsclzcypf6726xi@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:okoyo3zksunfyoqabwvepxdw/bafkreiaum472ateefy43g3ot2gjxndbdipsbuv6npgznd6pqel3nuo3pci@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:ekc6spxu2hxdkl3eclbtbm56/bafkreicirnk763slbf6tnqcpojzdg2c5ktghxkn2nue4su6of2b3fam67a@jpeg',
].map(item => {
  return {
    avatar: item,
    nickName: 'test'
  }
});

const ItemRender: FC = () => {
  const router = useRouter();
  const { medias = [], creator } = useDetails();
  // like
  const [likeData, setLikeData] = useSafeState({
    total: 77,
    liked: false,
  });

  const onClick = useMemoizedFn(() => {
    router.push('/detail');
  });

  const triggerLike = useMemoizedFn(() => {
    let total = likeData.total;
    const liked = !likeData.liked;
    total = total + (liked ? +1 : -1);
    likeData.total = total;
    likeData.liked = liked;
    setLikeData({ ...likeData });
  });

  return (
    <View style={styles.wrapper}>
      <Avatar url={creator.avatar} />
      <View style={styles.content}>
        <Header />
        <View style={styles.desc}>
          <Space
            size={8}
            direction="vertical"
          >
            <RichText
              onClick={onClick}
              numberOfLines={3}
            />
            {medias.length > 0 && (
              <PreviewImages urls={medias} />
            )}
          </Space>
          <Space
            size={12}
            direction="vertical"
            style={styles.others}
          >
            <TouchableOpacity
              activeOpacity={.8}
              onPress={onClick}
            >
              <Space
                size={6}
                direction="vertical"
                style={styles.info}
              >
                <Times />
                <Location />
              </Space>
            </TouchableOpacity>
            <View style={styles.footer}>
              <Participants
                total={99}
                users={users}
              />
              <Likes
                {...likeData}
                onClick={triggerLike}
              />
            </View>
          </Space>
        </View>
      </View>
    </View>
  );
}

export default ItemRender;